<!DOCTYPE html>
<html lang="zh">

<head>
    <title>天嘉智慧云</title>
    <#include "/headerTj.html">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <script src="http://webapi.amap.com/maps?v=1.4.6&key=7d90c90b1dbe8a8aab6e0d7a77123ecb&plugin=AMap.MouseTool"></script>
        <link rel="stylesheet" href="${request.contextPath}/statics/plugins/datepickerZip/css/datepicker.css">
        <style>
            .progress {
                margin-bottom: 0px;
            }

            .panel-body-nopad {
                padding: 0px;
            }

            .btn-group-justified > .btn.focus, .btn:focus, .btn:hover {
                color: white;
                text-decoration: none;
            }

            .btn-default:hover {
                color: #fff;
                background-color: #5AA7f3;
                border-color: #fff;
            }
            .c-datepicker-date-editor {
                border:none;
                background-color: #5bc0de;
            }
        </style>
        </head>

<body>

    <div class="container-fluid nolrpad" style="padding:0 0.5%;" >
        <div class="row" id="staff_app">
            <div class="col-lg-10">
                <ul id="myTab" class="nav nav-pills nav-lb">
                    <li class="nobtnli"><a href="#opt" data-toggle="tab"> 轨迹回放</a></li>
                    <li class="nobtnli" style="float: right; margin-top: 3px;margin-right:3px;border: none;">
                        <select class="form-control" v-model="gps" @change="checkMap()">
                            <option value="10">高精度</option>
                            <option value="69">一般精度</option>
                        </select>
                    </li>
                    <li class="nobtnli" style="float: right; margin-top: 3px;margin-right:10px;border: none;">
                        <div class="c-datepicker-date-editor J-datepicker-range-between30 mt10" style="color:white;">
                            <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
                            <input placeholder="开始时间"  class="c-datepicker-data-input" style="color:white;background-color:transparent;" id="startTime">
                            <span class="c-datepicker-range-separator">-</span>
                            <input placeholder="结束时间"  class="c-datepicker-data-input" style="color:white;background-color:transparent;" id="endTime">
                        </div>
                    </li>
                </ul>
                <div class="panel panel-default" style="padding-top:0;">
                    <div class="panel-body nopaddingtop" style="padding:0;">
                        <div id="mapcontainer"></div>
                        <div class="button-group" style="fonts-color:white;">
                            <div class="button-group btn-info col-lg-3" style="margin-right:0.1%;text-align:center;">
                                <a href="#">轨迹回放</a>
                            </div>
                            <div class="col-lg-3  btn-info">
                                <a><i class="fa fa-backward" style="margin:0 5%"></i></a>
                                <a><i class="fa fa-pause" style="margin:0 5%"></i></a>
                                <a><i class="fa fa-play" style="margin:0 5%"></i></a>
                                <a style="margin-right:5%"><i class="fa fa-forward"></i></a>
                                <a><i class="fa fa-forward"></i>4</a>
                                <a><i class="fa fa-forward" style="margin-left:5%"></i>8</a>
                                <a><i class="fa fa-forward" style="margin-left:5%"></i>16</a>
                            </div>
                            <div class="button-group btn-info col-lg-3" style="margin-left:0.1%;text-align:center;">
                                <a>起始时间：{{time.startTime}}</a>
                            </div>
                            <div class="button-group btn-info col-lg-3"
                                 style="width:24%;margin-left:0.1%;text-align:center;">
                                <a>结束时间：{{time.endTime}}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-body nopaddingtop" style="padding:0">

                        <table class="table table-hover datatable">
                            <thead style="padding:0;">
                            <tr style="background-color:#5AA7f3;color:white">
                                <th>序号</th>
                                <th>区域</th>
                                <th>组织</th>
                                <th>职位</th>
                                <th>姓名</th>
                                <th>联系方式</th>
                                <th>在线时长</th>
                                <th>作业预警</th>
                                <th>预警次数</th>
                                <th>实时监控</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>201801</td>
                                <td>某区域</td>
                                <td>保洁所3</td>
                                <td>保洁员</td>
                                <td>盛洁洁</td>
                                <td>1305258888</td>
                                <td>6.5h</td>
                                <td><span class='label label-danger'>滞留超时</span></td>
                                <td>3</td>
                                <td></td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-body nopaddingtop" style="padding:0">
                        <table class="table table-hover datatable">
                            <thead>
                            <tr style="background-color:#5AA7f3;color:white">
                                <th>作业方式</th>
                                <th>作业种类</th>
                                <th>起始时间</th>
                                <th>终止时间</th>
                                <th>行走步数</th>
                                <th>平均速度（Km/h）</th>
                                <th>行驶里程（Km）</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>人员保洁</td>
                                <td>散落扫保</td>
                                <td>2018-08-20 08:00</td>
                                <td>2018-08-20 10:00</td>
                                <td>51314</td>
                                <td>3</td>
                                <td>20</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-lg-2"  >
                <div class="navbar-default sidebar" role="navigation">
                    <div class="sidebar-nav navbar-collapse">
                        <div class="btn-group btn-group-justified" role="group" style="margin-top:0px;">
                            <a type="button" class="btn btn-default btn-in-head " ><span style="float: left;"><i class="fa fa-step-forward"></i></span>在线人员</a>
                        </div>
                        <div class="sidebar-wrapper">
                            <ul class="nav navasp">
                                <li v-for="item in areaList.areaList">
                                    <a data-toggle="collapse"  :href="'#set'+item.pid"><p>{{item.projectName}}<i class="fa fa-caret-left" aria-hidden="true" style="float:right;"></i></p></a>
                                    <div class="collapse" :id="'set'+item.pid">
                                        <ul class="nav lnav navinnav">
                                            <li v-for="user in areaList.userList" v-if="user.areaList.indexOf(item.pid)!=-1"  @click="show(user.imei)">
                                                <a href="#"><i class="fa fa-user-o fa-2x fa-pull-left"  style="margin-right:15%;" aria-hidden="true">
                                                </i> {{user.name}}<br>{{user.mobile}}
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- /.navbar-static-side -->
                    </nav>
                </div>
            </div>
        </div>



    </div>
    <script src="${request.contextPath}/statics/js/modules/xinpai/stall_play_back.js?_${.now?long}"></script>
    <script type="text/javascript">
                $('div.btn-group-vertical > a.btn-default').click(function () {
                    if ($(this).hasClass('btn-primary')) {
                        $(this).removeClass('btn-primary');
                        $(this).addClass('btn-default');

                    }
                    else {
                        $(this).siblings().removeClass('btn-primary');
                        $(this).removeClass('btn-default');
                        $(this).addClass('btn-primary');
                    }
                })


                $('div.btn-group-vertical > a.btn-default').click(function () {
                    if ($(this).hasClass('btn-primary')) {
                        $(this).removeClass('btn-primary');
                        $(this).addClass('btn-default');
                    }
                    else {
                        $(this).siblings().removeClass('btn-primary');
                        $(this).removeClass('btn-default');
                        $(this).addClass('btn-primary');
                    }
                })
                $("body").on("click", "ul.navinnav >li>a", function () {
                    if (!$(this).hasClass("select")) {
                        var ul = $(this).parent().parent();
                        ul.find("a").removeClass('select');
                        $(this).addClass('select');
                    }
                })
                $("body").on("click", "ul.navasp >li>a", function () {
                    if ($(this).children("p").children("i").hasClass("fa-plus")) {
                        $(this).children("p").children("i").removeClass("fa-plus").addClass("fa-minus");
                    }
                    else if ($(this).children("p").children("i").hasClass("fa-minus")) {
                        $(this).children("p").children("i").removeClass("fa-minus").addClass("fa-plus");
                    }
                    else if ($(this).children("p").children("i").hasClass("fa-caret-right")) {
                        $(this).children("p").children("i").removeClass("fa-caret-right").addClass("fa-caret-down");
                    }
                    else if ($(this).children("p").children("i").hasClass("fa-caret-down")) {
                        $(this).children("p").children("i").removeClass("fa-caret-down").addClass("fa-caret-right");
                    }
                })
                $("body").on("click", "ul.navinnav >li>a", function () {
                    if ($(this).children("p").children("i").hasClass("fa-plus")) {
                        $(this).children("p").children("i").removeClass("fa-plus").addClass("fa-minus");
                    }
                    else if ($(this).children("p").children("i").hasClass("fa-minus")) {
                        $(this).children("p").children("i").removeClass("fa-minus").addClass("fa-plus");
                    }
                    else if ($(this).children("p").children("i").hasClass("fa-caret-right")) {
                        $(this).children("p").children("i").removeClass("fa-caret-right").addClass("fa-caret-down");
                    }
                    else if ($(this).children("p").children("i").hasClass("fa-caret-down")) {
                        $(this).children("p").children("i").removeClass("fa-caret-down").addClass("fa-caret-right");
                    }
                });
            </script>
    <script>
        $(function(){
            var DATAPICKERAPI = {
                // 默认input显示当前月,自己获取后填充
                activeMonthRange: function () {
                    return {
                        begin: moment().set({ 'date': 1, 'hour': 0, 'minute': 0, 'second': 0 }).format('YYYY-MM-DD HH:mm:ss'),
                        end: moment().set({ 'hour': 23, 'minute': 59, 'second': 59 }).format('YYYY-MM-DD HH:mm:ss')
                    }
                },
                shortcutMonth: function () {
                    // 当月
                    var nowDay = moment().get('date');
                    var prevMonthFirstDay = moment().subtract(1, 'months').set({ 'date': 1 });
                    var prevMonthDay = moment().diff(prevMonthFirstDay, 'days');
                    return {
                        now: '-' + nowDay + ',0',
                        prev: '-' + prevMonthDay + ',-' + nowDay
                    }
                },
                // 注意为函数：快捷选项option:只能同一个月份内的
                rangeMonthShortcutOption1: function () {
                    var result = DATAPICKERAPI.shortcutMonth();
                    return [{
                        name: '昨天',
                        day: '-1,-1',
                        time: '00:00:00,23:59:59'
                    }, {
                        name: '这一月',
                        day: result.now,
                        time: '00:00:00,'
                    }, {
                        name: '上一月',
                        day: result.prev,
                        time: '00:00:00,23:59:59'
                    }];
                },
                // 快捷选项option
                rangeShortcutOption1: [{
                    name: '最近一周',
                    day: '-7,0'
                }, {
                    name: '最近一个月',
                    day: '-30,0'
                }, {
                    name: '最近三个月',
                    day: '-90, 0'
                }],
                singleShortcutOptions1: [{
                    name: '今天',
                    day: '0'
                }, {
                    name: '昨天',
                    day: '-1',
                    time: '00:00:00'
                }, {
                    name: '一周前',
                    day: '-7'
                }]
            };
            //十分秒年月日范围，限制开始结束相隔天数小于30天
            var da=new Date();
            da.setHours(23);
            da.setMinutes(59);
            da.setSeconds(59);
            $('.J-datepicker-range-between30').datePicker({
                isRange: true,
                between: 30,
                max:moment(da).format('YYYY-MM-DD HH:mm:ss'),
            });
        });
    </script>
</body>
</html>
